class Magnifier {
    constructor(oSmallBox, oMask, oBigBox, oLis) {
        this.oSmallBox = oSmallBox;
        this.oMask = oMask;
        this.oBigBox = oBigBox;
        this.oLis = oLis;
    }
    mouseover() { //鼠标移入
        let that = this;
        this.oSmallBox.onmouseover = function () {
            that.oMask.style.display = "block";
            that.oBigBox.style.display = "block";
        }
    }
    mouseout() { //鼠标移出
        let that = this;
        this.oSmallBox.onmouseout = function () {
            that.oMask.style.display = "none";
            that.oBigBox.style.display = "none";
        }
    }
    mousemove() {
        let that = this;
        this.oSmallBox.onmousemove = function (evt) {
            let e = evt || event;
            // let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
            let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth;
            // let top = e.pageY - that.oSmallBox.offsetTop - that.oMask.offsetHeight / 2;
            let top = e.pageY - that.oSmallBox.offsetTop - that.oMask.offsetHeight;
            //  小图片/大图片 = 小窗口/大窗口（x)
            if (left < 0) {
                left = 0;
            }
            let maxLeft = this.offsetWidth - that.oMask.offsetWidth;
            if (top > maxLeft) {//右边界
                top = maxLeft;
            }
            if (top < 0) {
                top = 0;
            }
            let maxTop = this.offsetHeight - that.oMask.offsetHeight;
            if (left > maxTop) {//右边界
                left = maxTop;
            }
            let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
            let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;
            that.oMask.style.left = left + 'px';
            that.oMask.style.top = top + 'px';
            // that.oMask.style.left = e.pageX - this.offsetLeft - that.oMask.offsetWidth/2+ 'px';
            // that.oMask.style.top = e.pageY - that.oSmallBox.offsetTop -that.oMask.offsetHeight/2+ 'px';
            that.oBigBox.style.backgroundPositionX = -x + "px";
            that.oBigBox.style.backgroundPositionY = -y + "px";
        }
    }
    clickLi() {
        let that = this;
        for (let i = 0; i < this.oLis.length; i++) {
            console.log(this.oLis[i]);
            // console.log(this.oLis[i].style.backgroundImage);
            this.oLis[i].onmousemove = function () {
                //  console.log(this);
                that.oSmallBox.style.backgroundImage = this.style.backgroundImage;
                that.oBigBox.style.backgroundImage = this.style.backgroundImage;

            }
        }
    }
    Binkevent() {
        this.mouseover();
        this.mouseout();
        this.mousemove();
        this.clickLi();
    }
}
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
}
//接收URL中的参数goodsId
var id = getUrlParam('id');
var user = getCookie("username");
$.get("./goodsAndShoppingCart/getGoodsInfo.php", { "goodsId": id }, function (data) {
    Title(data);
    $("#prev").click(function(){
        var n = $(this).siblings(".count").html();
        if(n==1){
            return false;
        }
        n--;
        $(this).siblings(".count").html(n);
    });
    $("#next").click(function(){
        var n = $(this).siblings(".count").html();
        n++;
        $(this).siblings(".count").html(n);
    })
    var count = $(".count").html();
    $(".buy-action").click(function () {
        if(user != '') {
            $.post("./goodsAndShoppingCart/addShoppingCart.php", {
                "vipName": user, "goodsId": id, "goodsCount": count
            }, function () {
                alert("添加成功");
            });
        }else{
            alert("添加失败！请先登录！");
            location.href = "login.html";
            return false;
        }
    });
}, "json");
function Title(data) {
    let str = '';
    str = `    <div class="left"><ul class="list">
        <li style="background-image: url(${data.goodsImg}); background-size: 100% 100%;"></li>
        <li style="background-image: url(${data.beiyong1}); background-size: 100% 100%;"></li>
        <li style="background-image: url(${data.beiyong2}); background-size: 100% 100%;"> </li>
        <li style="background-image: url(${data.beiyong3}); background-size: 100% 100%;"> </li>
        <li style="background-image: url(${data.beiyong4}); background-size: 100% 100%;"> </li></ul>
    <div class="small-box"style="background-image: url(${data.goodsImg}); background-size: 440px 440px;">
        <div class="mask"></div>
    </div>
    <div class="big-box"style = "background-image: url(${data.goodsImg});background-size: 573px 573px;"></div></div>
    <div class="right"><div class="title">
        <h1>${data.goodsName} </h1>
        <p>${data.goodsDesc}</p></div>
    <div class="startbox">
        <i class="iconfont icon-shoucangjia"></i><i class="iconfont icon-shoucangjia"></i>
        <i class="iconfont icon-shoucangjia"></i><i class="iconfont icon-shoucangjia"></i>
        <i class="iconfont icon-shoucangjia"></i></div>
    <div class="skinbox">
        <p><span class="title">肌肤类型:</span><span>任何肌肤类型</span></p>
        <p><span class="title">使用：</span><span>早晨及/或晚上常规护肤霜前使用</span></p></div>
    <div class="information">
        <div class="product">
            <s>30ml</s><s>50ml</s><s>75ml</s>
        </div>
        <div class="action"><ul>
                <li class="price">￥${data.goodsPrice}</li>
                <li class="buy">
                    <button type="button" id="next">+</button>
                    <span class="count">4</span>
                    <button type="button" id="prev">-</button> </li>
                <li class="buy-action" style="cursor: pointer;">加入购物车</li></ul></div>
    </div>
    <div class="pds"><ul><li> <span><img src="./images/a.png" alt=""></span><p>3个免费试用装</p></li><li>
                                    <span><img src="./images/a2.png" alt=""></span><p>3个免费试用装</p> </li>
                                <li> <span><img src="./images/a3.png" alt=""></span> <p>3个免费试用装</p></li>
                                <li><span><img src="./images/a4.png" alt=""></span> <p>3个免费试用装</p></li>
                            </ul></div>`;
    $(".magnifier").prepend(str);
    let oSmallBox = document.getElementsByClassName("small-box")[0];
    let oMask = document.querySelector(".mask");
    let oBigBox = document.querySelector(".big-box");
    let oLis = $(".list li");
    // console.log($(".list li"));
    let ma = new Magnifier(oSmallBox, oMask, oBigBox, oLis);
    ma.Binkevent();
}

